<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:23:31
 * @LastEditTime: 2022-07-03 15:22:23
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/plan-manager/PlanList.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="1.5" style="margin-top:7px;margin-left: 60px;" class="acc">计划名称：</el-col>
          <el-col :span="4" class="in">
            <el-input v-model="input" placeholder="请输入计划名称"></el-input>
            <button><img src="../../assets/sou.png"></button>
          </el-col>

          <el-col :span="1.5" style="margin-top:7px;margin-left: 150px;" class="acc">计划状态：</el-col>
          <el-col :span="4">
            <el-select v-model="selectstate" slot="prepend" placeholder="请选择">
              <el-option :value="item" v-for="(item,index) in stateList" :key="index">{{item}}</el-option>
            </el-select>
          </el-col>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 100px;" type="white">重置</el-button>
          <el-button style="padding: 3px 0;width: 80px;position: absolute;right: 5px;" type="primary" @click="choosePlan">查询</el-button>
        </el-row>
      </div>
    </el-card>
    <el-card style="margin-top:10px; height: 60px;" >
      <el-button style="float: right; width: 100px; margin-left: 10px;" :disabled="btnBoolean" type="primary" @click="">批量删除</el-button>
      <el-button style="float: right; width: 100px;" type="primary" @click="$router.push('/newplan')">新建计划</el-button>
    </el-card>
    <!-- <el-card style="margin-top:10px"> -->
      <!-- table -->
      <div class="choose" v-if="show">
        <p>已选择<span>{{count}}</span>项</p>
        <el-button type="text" size="middle" @click="toggleSelection()">取消选择</el-button>
      </div>
      <el-table
        ref="multipleTable"
        @select="handleSelect"
        @select-all="selectAll"
        :data="tableData"
        style="width: 100%; font-size: 12px; margin-top:10px;"
        stripe
        :header-cell-style="{ background: 'rgb(35, 39, 56)', fontSize:'14px',color: '#fff' }"
        :cell-style="{cellStyle, background: 'rgb(41, 45, 62)', color: '#fff', fontSize:'14px'}"
      >
        <el-table-column type="selection" width="40" ></el-table-column>
        <el-table-column
          width="100"
          prop="pic"
          label="缩略图"
          key="slot"
        >
          <template #default="scope">
            <el-avatar shape="square" :size="60" fit="fill" :src="scope.row.pic"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          width="130"
          prop="plan"
          label="计划名称"
        ></el-table-column>
        <el-table-column
          prop="state"
          label="计划状态"
        ></el-table-column>
        <el-table-column
          width="120"
          prop="play"
          label="播放模式"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="start"
          label="播放开始日期"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="end"
          label="播放结束日期"
        ></el-table-column>
        <el-table-column
          width="120"
          prop="author"
          label="作者"
        ></el-table-column>
        <el-table-column
          width="120"
          prop="check"
          label="审核人"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="time"
          label="更新时间"
        ></el-table-column>
        <el-table-column
          width="200"
          prop="operation"
          label="操作">
          <template #default="scope">
            <el-button type="text" size="middle" @click="checkPlan(scope.$index, scope.row)">详情</el-button>
            <el-button type="text" size="middle" @click="updateSystem(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" size="middle" @click="copyPlan(scope.$index, scope.row)">复制</el-button>
            <el-button type="text" size="middle" @click="deletePlan(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" size="middle" disabled>加密下载</el-button>
            <el-button type="text" size="middle" @click="putPlan(scope.$index, scope.row)">重新发布</el-button>
          </template>
          
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogPreVisible" v-model="dialogPreVisible" width="70%">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="计划详情" name="first">
            <el-descriptions :column="2">
              <el-descriptions-item label="计划名称：">{{this.plandetail.name}}</el-descriptions-item>
              <el-descriptions-item label="播放日期：">{{this.plandetail.date}}</el-descriptions-item>
              <el-descriptions-item label="播放模式：">{{this.plandetail.mode}}</el-descriptions-item>
              <el-descriptions-item label="发布状态：">{{this.plandetail.state}}</el-descriptions-item>
              <el-descriptions-item label="创建时间：">{{this.plandetail.createtime}}</el-descriptions-item>
              <el-descriptions-item label="播放时段：">{{this.plandetail.startTime}}-{{this.plandetail.endTime}}</el-descriptions-item>
              <el-descriptions-item label="已选节目：">
                <el-image 
                  style="width: 200px; height: 300px"
                  :src="this.plandetail.url" 
                  :preview-src-list="this.plandetail.srcList">
                </el-image>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="设备详情" name="second">
            <el-descriptions direction="vertical" :column="6" border style="margin-bottom:20px">
              <el-descriptions-item label="设备名称">{{this.devicedetail.name}}</el-descriptions-item>
              <el-descriptions-item label="MAC地址">{{this.devicedetail.mac}}</el-descriptions-item>
              <el-descriptions-item label="分辨率" >{{this.devicedetail.ratio}}</el-descriptions-item>
              <el-descriptions-item label="所属机构" >{{this.devicedetail.organization}}</el-descriptions-item>
              <el-descriptions-item label="当前计划" >{{this.devicedetail.plan}}</el-descriptions-item>
              <el-descriptions-item label="设备状态" >{{this.devicedetail.state}}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer" style="position: absolute;right: 10px;bottom: 5px;">
          <el-button @click="dialogPreVisible = false">取 消</el-button>
        </span>
      </el-dialog>

    <!-- </el-card> -->
  </div>
</template>

<script>
import { getPlanList, deletePlan, getPlanDetail, copyPlan, checkPlanList, putPlan} from "../../axios/plan";
import { infoMechanism, getMechanism } from "../../axios/device";
import { request } from '../../axios/request';
import moment from "moment";
export default {
  data() {
    return {
      dialogPreVisible:false,
      input:'',
      selectstate:'',
      count: 0,
      show:0,
      User:[],
      btnBoolean:true,
      plandetail:
      {
        name:'',
        mode:'',
        createtime:'',
        date:'',
        state:'',
        startTime:'',
        endTime:'',
        url:'',
        srcList:[]
        // url:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      },
      devicedetail:{
        name:'',
        mac:'',
        ratio:'1920x1080',
        organization:'',
        plan:'--',
        state:'',
      },
      tableData: [
        // {
        //   pic:'http://boe.vinf.top:8888/asset/2/hello-world.png',
        //   Name:'11111',
        //   state:'发布中',
        //   play:'按时段播放',
        //   day:'2022-06-26 ~ 2022-07-07',
        //   author:'luolaoshi',
        //   check:'luolaoshi',
        //   time:'	2022-06-26 14:57:08',
        // },
        // {
        //   pic:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //   plan:'11111',
        //   state:'发布中',
        //   play:'按时段播放',
        //   day:'2022-06-26 ~ 2022-07-07',
        //   author:'luolaoshi',
        //   check:'luolaoshi',
        //   time:'	2022-06-26 14:57:08',
        // },
      ],
      stateList: ['所有状态','未发布','已发布'],
      
    };
  },
  created(){
    this.getPlanApi()
  },
  methods: {
    //搜索
    searchId() {},
    handleClick(row) {
      console.log(row);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    toggleSelection() {
        this.$refs.multipleTable.clearSelection();
        this.count=0;
        this.show=0
        this.btnBoolean=true
        console.log(this.count)
    },
    handleSelect(val) {
      console.log(val)
      if(val.length==0){
        console.log(1)
        this.count--
        if(this.count==0){
          this.show=0
          this.btnBoolean=true
        }
      }else{
        console.log(2)
        this.count++
        this.show=1
        this.btnBoolean=false
      }
      // console.log(this.count)
    },
    selectAll:function () {
      if(this.count==0){
        this.show=1
        this.btnBoolean=false
        this.count=this.tableData.length
      }else{
        this.show=0
        this.btnBoolean=true
        this.count=0
      }
    },
    checkPlan(index,row){
      this.dialogPreVisible = true
      console.log(1111)
      const id=this.User[index].ID
      console.log(id)
      getPlanDetail(id).then(request=>{

          this.plandetail.name=request.data.plan.Name,
          this.plandetail.mode=request.data.plan.Mode,
          this.plandetail.createtime=request.data.plan.CreatedAt,
          this.plandetail.createtime = moment(this.plandetail.createtime).format("YYYY-MM-DD HH:mm:ss")
          this.plandetail.date=request.data.plan.StartDate,
          this.plandetail.state=request.data.plan.State
          this.plandetail.startTime=request.data.plan.PlayPeriods[0].StartTime
          this.plandetail.endTime=request.data.plan.PlayPeriods[0].EndTime
          const html=JSON.parse(request.data.plan.PlayPeriods[0].Shows[0].Images)
          this.plandetail.srcList=html
          this.plandetail.url=html[0]
          console.log(html)
      }),
      getMechanism("0","100").then(request=>{
        console.log(request.data.devices)
        console.log('设备'),
        this.devicedetail.name=request.data.devices[3].Name,
        this.devicedetail.mac=request.data.devices[3].Mac,
        this.devicedetail.organization=request.data.devices[3].OrganizationID,
        this.devicedetail.state=request.data.devices[3].State,
        console.log(this.devicedetail)
      })
    },
    getPlanApi(){
      getPlanList("0","100").then(request =>{
        console.log('zheli')
        console.log(request.data.plans)
        this.User=request.data.plans
        let data=request.data.plans
        data.forEach(element => {
          this.tableData.push(
            {
              pic:element.Preview,
              plan:element.Name,
              state:element.State,
              play:element.Mode,
              start:element.StartDate,
              end:element.EndDate,
              author:element.UserID,
              check:element.UserID,
              time:element.UpdatedAt
            }
          )
        });
        for (let i = 0; i < this.tableData.length; i++) {
          // console.log(state.tableData[i].UpdatedAt);
          this.tableData[i].time = moment(
            this.tableData[i].time
          ).format("YYYY-MM-DD HH:mm:ss");
        }
        this.totalCount=request.data.plans.length
        console.log(this.totalCount)
      })
    },
    deletePlan(index,row){
      // console.log(this.User)
      const id=this.User[index].ID
      console.log(id)
      deletePlan(id).then(request=>{
        window.location.replace("/planlist")
        console.log('删除')
      })

      // for(let i=0;i<this.User.length;i++){
      //   if(this.User[i].Username==row.plan){
      //     console.log(this.User[i].ID)
      //     const userId = (this.User[i].ID).toString()
      //     console.log(userId)
      //     // deletePlan(userId).then(request=>{
      //     //   window.location.replace("/planlist")
      //     //   console.log('删除')
      //     // })
      //   }
      // }
    },
    updateSystem(index,row){
      this.$router.push('/newplan')
    },
    copyPlan(index,row){
      const id=this.User[index].ID
      console.log(id)
      copyPlan(id).then(request=>{
        window.location.replace("/planlist")
        console.log('copy')
      })
    },
    choosePlan(){
      console.log(this.input)
      checkPlanList("0","100",this.input,this.selectstate).then(request =>{
        console.log('check')
        console.log(request)
        let data=request.data.plans
        data.forEach(element => {
          this.tableData.push(
            {
              pic:element.Preview,
              plan:element.Name,
              state:element.State,
              play:element.Mode,
              start:element.StartDate,
              end:element.EndDate,
              author:element.UserID,
              check:element.UserID,
              time:element.UpdatedAt
            }
          )
        });
        console.log(this.tableData)
        for (let i = 0; i < this.tableData.length; i++) {
          // console.log(state.tableData[i].UpdatedAt);
          this.tableData[i].time = moment(
            this.tableData[i].time
          ).format("YYYY-MM-DD HH:mm:ss");
        }
      })
    },
    putPlan(index,row){
      const id=this.User[index].ID
      putPlan(id).then(request=>{
        console.log(request)
        window.location.replace("/planlist")
      })
    }
  },
  
};
</script>

<style lang="less" scoped>
.el-card{
  background-color: rgb(41, 45, 62);
  border: 0px;
}
.box-card{
  .acc{
    color: white;
  }
  .in{
    background-color: white;
    display: flex;
    border-radius: 5px;
    input{
      background-color: rgb(35, 39, 56);
      height: 30px;
      width: 120px;
      border:0px;
      margin-right: 3px;
    }
    button{
      width: 30px;
      height: 30px;
      border-radius: 5px;
      background-color: white;
      border: 0px;
      img{
        width: 70%;
        height: 50%;
        margin-top: 5px;
      }
    }
  }
}
.choose{
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  p{
    color: white;
  }
  .el-button{
    position: absolute;
    right: 50px;
  }
}
</style>